<template>
	<view class="service-box">
		<u-popup :show="show" mode="bottom" :round="20" bgColor="white" @close="show = false">
			<view class="service-content-box">
				<view class="service-item" @tap="copyAction(1)">
					<image class="service-item-left-icon" src="/static/my_contact_icon1.png" mode="aspectFit"></image>
					<text>微信客服号（{{WECHAT_CUSTOMSERVIC_CODE}}）</text>
					<image class="service-item-right-icon" src="/static/my_copy_icon.png" mode="aspectFit"></image>
				</view>
				<view class="service-item" @tap="copyAction(2)">
					<image class="service-item-left-icon" src="/static/my_contact_icon2.png" mode="aspectFit"></image>
					<text>公众号（{{WECHAT_OFFICIAL_ACCOUNDT}}）</text>
					<image class="service-item-right-icon" src="/static/my_copy_icon.png" mode="aspectFit"></image>
				</view>
				<view class="service-item" @tap="copyAction(3)">
					<image class="service-item-left-icon" src="/static/my_contact_icon3.png" mode="aspectFit"></image>
					<text>{{CUSTOMSERVICE_TEL}}</text>
					<image class="service-item-right-icon" src="/static/my_tel_icon.png" mode="aspectFit"></image>
				</view>
				<view class="service-close" @tap="show = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { CUSTOMSERVICE_TEL,WECHAT_CUSTOMSERVIC_CODE,WECHAT_OFFICIAL_ACCOUNDT } from '@/config/config.js'
	// 是否显示弹框
	const show = ref(false)
	//显示
	const open = () => {
		show.value = true
	}
	//关闭
	const close = () => {
		show.value = false
	}
	//选择联系类型
	const copyAction = (type)=>{
		if(type == 1){
			uni.$tools.copy(WECHAT_CUSTOMSERVIC_CODE)
		}
		else if(type == 2){
			uni.$tools.copy(WECHAT_OFFICIAL_ACCOUNDT)
		}
		else{
			uni.makePhoneCall({
				phoneNumber:CUSTOMSERVICE_TEL
			})
		}
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>

.service-content-box{
	background-color: white;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding-top: 50rpx;
	.service-item{
		display: flex;
		align-items: center;
		color: $xh-title-color;
		font-size: 28rpx;
		margin-bottom: 40rpx;
		padding: 0 30rpx;
		.service-item-left-icon{
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}
		.service-item-right-icon{
			margin-left: auto;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.service-close{
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		border-top: 1px solid $xh-line-color;
	}
}
</style>